<template>
	<view class="page">
		<view class="top">
			<view class="user-card">
				<view class="user-image">
					<image :src="avatarUrl||afteravatarUrl" mode="aspectFill" class="avatar"></image>
				</view>
				<view class="user-info">
					<text class="nickname" v-if="!nickName" @click="login">点击登录</text>
					<text class="nickname" v-else>{{nickName}}</text>
				</view>
			</view>
			<view class="emergency-card" @click="succour">
				<view class="card-content">
					<image src="/static/mine/first_aid_packet.png" mode="aspectFit" class="card-icon"></image>
					<text class="card-title">医疗急救卡</text>
					<uni-icons type="right" size="20" color="#fff" class="card-arrow"></uni-icons>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<view class="menu-item" @click="toHealthRecord">
				<view class="item-left">
					<!-- <image src="/static/mine/archives.png" mode="aspectFit" class="item-icon"></image> -->
					<image src="/static/mine/healthReport.png" mode="aspectFit" class="item-icon"></image>
					<text class="item-text">健康档案</text>
				</view>
				<uni-icons type="right" size="16" color="#909399" class="item-arrow"></uni-icons>
			</view>
			<view class="menu-item">
				<view class="item-left">
					<image src="/static/mine/record.png" mode="aspectFit" class="item-icon"></image>
					<text class="item-text">历史记录</text>
				</view>
				<uni-icons type="right" size="16" color="#909399" class="item-arrow"></uni-icons>
			</view>
			<view class="menu-item">
				<view class="item-left">
					<!-- <image src="/static/mine/setting.png" mode="aspectFit" class="item-icon"></image> -->
					<image src="/static/mine/setting(1).png" mode="aspectFit" class="item-icon"></image>
					<text class="item-text">系统设置</text>
				</view>
				<uni-icons type="right" size="16" color="#909399" class="item-arrow"></uni-icons>
			</view>
			<view class="menu-item">
				<view class="item-left">
					<image src="/static/mine/ours.png" mode="aspectFit" class="item-icon"></image>
					<!-- <image src="/static/mine/archives.png" mode="aspectFit" class="item-icon"></image> -->
					<text class="item-text">关于我们</text>
				</view>
				<uni-icons type="right" size="16" color="#909399" class="item-arrow"></uni-icons>
			</view>
		</view>
		<view class="logout-section">
			<button class="logout-button" @click="exit" v-if="nickName">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import healthRecord from '../../components/mine/healthRecord/healthRecord.vue'
	import { ref, onMounted } from "vue";

	//获取头像
	const avatar = uni.getStorageSync("avatar");


	function login() {
		//跳转到登录页面
		uni.navigateTo({
			url: '/components/login/login',
		})
	}

	function succour() {
		//跳转急救卡页面
		uni.navigateTo({
			url: '/components/mine/card/card'
		})
	};
	//跳转健康档案healthRecord页面
	function toHealthRecord() {
		uni.navigateTo({
			url: '/components/mine/healthRecord/healthRecord'
		})
	};
	//获取用户信息
	let afteravatarUrl = '/static/head/head.jpeg';
	let avatarUrl = uni.getStorageSync('avatarUrl');
	let nickName = uni.getStorageSync('nickname'); 

	function exit() {
		uni.showModal({
			title: '安全提示',
			content: '确定要退出当前账号吗？',
			confirmColor: '#DD514C',
			success: (res) => {
				if (res.confirm) {
					//清除本地缓存
					uni.removeStorageSync('token');
					uni.removeStorageSync('avatarUrl');
					uni.removeStorageSync('chatMessages');
					uni.removeStorageSync('cardInfo');
					uni.removeStorageSync('shareData');
					uni.removeStorageSync('chatMessages');
					uni.removeStorageSync('nickname');
					//自动刷新页面
					uni.reLaunch({
						url: '/pages/mine/mine'
					});
				}
				console.log('退出成功');
				// uni.switchTab({
				// 	url: '/pages/index/index',
				// })
			},
		})
	}
</script>

<style lang="scss">
	.page {
		display: flex;
		height: 100vh;
		background-color: $uni-bg-color;
		flex-flow: column nowrap;
		padding:20rpx;
	}

	.top {
		flex: 1;
		max-height:35%;
		display: flex;
		flex-flow: column nowrap;
		justify-content:space-around;
		background-color: $uni-white;
		border-radius: 30rpx;
		padding: 60rpx 30rpx;
		margin-bottom:30rpx;
		box-shadow: $uni-shadow-base;
	}

	.user-card {
		display: flex;
		align-items: center;
		margin: 60rpx  0rpx;
	}

	.user-image {
	    flex: 1;
		max-width: 20%;
		max-height: 70%;
		margin-right:30rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid $uni-border-1;
	}

	.user-info {
		flex:1;
	}

	.nickname {
		font-size: 36rpx;
		color: $uni-main-color;
		font-weight: 500;
	}

	.emergency-card {
		background: linear-gradient(135deg, $uni-error, $uni-warning);
		border-radius: 20rpx;
		padding:6%;
		box-shadow: $uni-shadow-sm;
	}

	.card-content {
		display: flex;
		align-items: center;
	}

	.card-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.card-title {
		flex: 1;
		color: $uni-white;
		font-size: 32rpx;
		font-weight: 500;
	}

	.card-arrow {
		margin-left: 10rpx;
	}

	.menu-list {
		flex:1;
		max-height:40%;
		background-color: $uni-white;
		border-radius: 30rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $uni-shadow-base;
		display: flex;
		flex-flow: column nowrap;
	}

	.menu-item {
		flex:1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 2rpx solid $uni-border-1;

		&:last-child {
			border-bottom: none;
		}
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.item-text {
		font-size: 30rpx;
		color: $uni-main-color;
	}

	.item-arrow {
		color: $uni-secondary-color;
	}

	.logout-section {
		padding: 40rpx 30rpx;
	}

	.logout-button {
		width:80%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #ffffff;
		color:black;
		font-size: 32rpx;
		border-radius:30rpx;
		border: none;
		box-shadow:0.4rpx 5rpx 15rpx #dcdcdc;

		&:active {
			background-color: #c6c6c6;
		}
	}
</style>